<script lang="ts" setup>
//文章核心内容
import Header from "@/components/Single/Header.vue";
import HeadSuper from "./Head-Super.vue";
import Featured from "@/components/Single/Featured.vue";
import Content from "@/components/Single/Content.vue";
import { ref, watch, watchEffect } from "vue";
import { IndexShowData } from "@/api/interface";
export interface Props {
  data: IndexShowData;
}

//接收数据
const props = defineProps<Props>();

//标题
const head = ref<IndexShowData>();
//图片
const image = ref();
//内容
let content: IndexShowData;
watch(
  () => props.data,
  (newVal) => {
    //进行判断，若值则传，无值为undefined
    head.value = newVal;
    image.value = newVal?.image;
    content = newVal;
  }
);
</script>
<template>
  <!--文章标题
  <HeadSuper :data="head"></HeadSuper>
  -->

  <component :is="Math.random() > 0.5 ? Header : HeadSuper" :data="head" />

  <!--文章特色图-->
  <Featured :image="image"></Featured>

  <!--文章内容-->
  <Content :data="content"></Content>
</template>
<style lang="less" scoped></style>
